import Main from '../components/main'
import Login from '../components/Login'
import NotFind from '../components/404'
import About from '../components/main/About'
import Home from '../components/main/Home'
import News from '../components/main/Home/News'
import Music from '../components/main/Home/Music'
import { Navigate, useRoutes } from 'react-router-dom'


const routes = [
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/main',
    element: <Main />,
    children: [
      {
        path: '/main/about',
        element: <About />,
      },
      {
        path: '/main/home',
        element: <Home />,
        children:[
          {
            path: '/main/home/news',
            element: <News />,
          },
          {
            path: '/main/home/music',
            element: <Music />,
          },
        ]
      }
    ]
  },
  {
    path: '/',
    element: <NotFind />
  },
  {
    path: '*',
    element: <Navigate to="/login" />
  }

]

export default routes

//大写开头,相当于声明了一个组件,这个组件就是根据路由表生成的路由配置结构
export const GetRoutes = () => {
  return useRoutes(routes)
}

//自定义hooks
export const useMyRoutes = () => {
  //hook使用规则
  //只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
  //只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用
  return useRoutes(routes)
}